<template>
  <div>
    <a-modal :visible="Details" title="修改套餐明细" @ok="handleOk" @cancel="close" class="detailmodal" okText="保存设置">
      <div class="upload-tips tab-middle-tips mb10">
        <div>
          修改操作需在产品套餐提交SPU审核前或驳回之后进行，修改保存后需要重新提交SPU审核，抖音平台才能重新对内容进行审核
        </div>
      </div>
      <a-form-model :model="formState" name="basic" ref="formState" :label-col="labelCol" layout="inline" class="detalfrom">
        <div v-for="(item, index) in formState.itemContentReqs" :key="index">
          <a-form-model-item label="套餐名称：" :prop="'itemContentReqs.' + index + '.subTitle'" :rules="rules.subTitle">
            <a-input v-model="item.subTitle" style="width:638px;" :maxLength="30">
              <span slot="suffix"> {{ item.subTitle.length || 0 }}/30 </span>
            </a-input>
          </a-form-model-item>
          <div class="main">
            <div class="title">
              <img src="@/assets/images/statist/icon_ question.png" alt="" style="width:16px;height: 16px" />
              <div style="width:292px;margin-right: 16px">套餐明细</div>
              <div style="width:178px;margin-right: 16px">数量单位（如：1份）</div>
              <div style="width:118px">原价(元)</div>
            </div>
            <div class="conten" v-for="(k, dex) in item.itemDetails" :key="dex">
              <img src="@/assets/images/statist/icon_new_sort.png" alt="" style="width:20px;height: 20px;" />
              <a-form-model-item :prop="'itemContentReqs.' + index + '.itemDetails.' + dex + '.contentDesc'" :rules="rules.contentDesc">
                <a-textarea v-model="k.contentDesc" style="width: 292px; margin-right: 16px;" placeholder="请输入" />
              </a-form-model-item>
              <a-form-model-item :prop="'itemContentReqs.' + index + '.itemDetails.' + dex + '.numberAndUnit'" :rules="rules.numberAndUnit">
                <a-input v-model="k.numberAndUnit" style="width: 178px; margin-right: 16px; " placeholder="请输入" />
              </a-form-model-item>
              <a-form-model-item :prop="'itemContentReqs.' + index + '.itemDetails.' + dex + '.originalPrice'" :rules="rules.originalPrice">
                <a-input v-model="k.originalPrice" style="width: 118px;margin-right: 12px;  " placeholder="请输入" />
              </a-form-model-item>
              <a-icon class="dynamic-delete-button" type="minus-circle-o" :disabled="k.length === 1" @click="() => remove(k, index)" style="color: #FF3B30;" />
            </div>
          </div>
          <a-form-model-item>
            <a-button type="dashed" style=" width: 720px;background: #F5F5F5;" @click="add(index)"> <a-icon type="plus" /> 添加套餐明细 </a-button>
          </a-form-model-item>
        </div>
      </a-form-model>
    </a-modal>
  </div>
</template>

<script>
import { getItemDetails, updateItemDetails } from '@/service'
export default {
  data() {
    return {
      Details: false,
      productId: '', // 产品id
      formState: {
        itemContentReqs: [
          {
            subTitle: '',
            productId: 0, //  产品id
            productItemId: 0, // 套餐id
            itemDetails: [
              {
                contentDesc: '',
                numberAndUnit: '',
                originalPrice: ''
              }
            ]
          }
        ]
      },
      rules: {
        subTitle: [
          {
            required: true,
            message: '请输入',
            trigger: 'blur'
          }
        ],
        contentDesc: [
          {
            required: true,
            message: '请输入',
            trigger: 'blur'
          }
        ],
        numberAndUnit: [
          {
            required: true,
            message: '请输入',
            trigger: 'blur'
          }
        ],
        originalPrice: [
          {
            required: true,
            message: '请输入正确数值',
            trigger: 'blur',
            pattern: /^(([1-9]{1}\d*)|(0{1}))(\.\d{1,2})?$/
          }
        ]
      },
      labelCol: {
        style: {
          width: '70px'
        }
      }
    }
  },
  methods: {
    // 获取详情
    get_getItemDetails() {
      getItemDetails({ productId: this.productId })
        .then((res) => {
          this.formState = { itemContentReqs: [] }
          res.forEach((item) => {
            let list = []
            if (item.itemDetails && item.itemDetails.length > 0) {
              item.itemDetails.forEach((item2) => {
                list.push({ contentDesc: item2.contentDesc, numberAndUnit: item2.numberAndUnit, originalPrice: item2.originalPrice })
              })
            }
            this.formState.itemContentReqs.push({ subTitle: item.subTitle, itemDetails: list, productId: this.productId, productItemId: item.productItemId })
          })
          this.Details = true
        })
        .catch((err) => {
          console.log(err)
        })
    },
    open(id) {
      this.productId = id
      this.get_getItemDetails()
    },
    close() {
      this.$refs.formState.resetFields()
      this.Details = false
    },
    remove(item, index0) {
      let index = this.formState.itemContentReqs[index0].itemDetails.indexOf(item)
      if (index !== -1) {
        this.formState.itemContentReqs[index0].itemDetails.splice(index, 1)
      }
    },
    add(index0) {
      console.log(index0)
      this.formState.itemContentReqs[index0].itemDetails.push({ contentDesc: '', numberAndUnit: '', originalPrice: '' })
    },
    handleOk() {
      this.$refs.formState.validate((valid) => {
        if (valid) {
          updateItemDetails(this.formState)
            .then((res) => {
              console.log(res)
              this.$emit('updataDetails')
              this.close()
              this.$messageSend.success('操作成功')
            })
            .catch((err) => {
              console.log(err)
              // this.$messageSend.error(err)
            })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    }
  }
}
</script>

<style lang="scss">
.detailmodal {
  .ant-modal {
    width: 766px !important;
    .detalfrom {
      .ant-form-item-label {
        width: 80px !important;
      }
      .ant-form-item {
        margin-bottom: 16px;
        margin-right: 0;
        .ant-col {
          margin-left: 0;
        }
      }
      .main {
        border: 1px solid #f0f0f0;
        border-radius: 2px;
        width: 720px;
        box-sizing: border-box;
        .title {
          display: flex;
          align-items: center;
          padding: 6px 0 6px 12px;
          background: #f5f5f5;
          border-bottom: 1px solid #f0f0f0;
          box-sizing: border-box;
          width: 100%;
        }

        .conten {
          display: flex;
          width: 100%;
          padding: 8px 10px 9px 12px;
          box-sizing: border-box;
          .ant-form-item {
            margin-right: 0;
          }
          .dynamic-delete-button {
            margin-top: 12px;
          }
        }
      }
    }
  }
}
</style>
